<template>
  <div v-show="visible" class="kc-picker-panel kc-date-picker kc-popper">
    <div class="kc-picker-panel__body-wrapper">
      <slot name="sidebar" class="kc-picker-panel__sidebar"></slot>
      <div class="kc-picker-panel__sidebar" v-if="shortcuts">
        <button class="kc-picker-panel__shortcut"></button>
      </div>
      <div class="kc-picker-panel__body">
        <div class="kc-date-picker__header">
          <button class="kc-picker-panel__icon-btn kc-picker-panel__prev-btn kc-icon-d-arrow-left">&lt;&lt;</button>
          <button class="kc-picker-panel__icon-btn kc-picker-panel__prev-btn kc-icon-arrow-left">&lt;</button>
          <span class="kc-date-picker__header-label">{{ yearLabel }}</span>
          <span class="kc-date-picker__header-label">{{ t(`el.datepicker.month${month + 1}`) }}</span>
          <button class="kc-picker-panel__icon-btn kc-picker-panel__next-btn kc-icon-d-arrow-left">&gt;</button>
          <button class="kc-picker-panel__icon-btn kc-picker-panel__next-btn kc-icon-arrow-left">&gt;</button>
        </div>
        <div class="kc-date-picker__content">
          <date-table :date="date" />
        </div>
      </div>
      <div class="kc-picker-panel__footer">
        <button class="kc-picker-panel__link-btn">{{ t('el.datepicker.now') }}</button>
        <button class="kc-picker-panel__link-btn">{{ t('el.datepicker.confirm') }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import Locale from '@/mixins/locale';
import DateTable from '../basic/date-table';

export default {
  name: 'DatePanel',
  mixins: [Locale],
  components: {
    DateTable
  },
  data() {
    return {
      visible: false,
      shortcuts: '',
      date: new Date()
    };
  },
  computed: {
    year() {
      return this.date.getFullYear();
    },
    month() {
      return this.date.getMonth();
    },
    yearLabel() {
      const yearTranslation = this.t('el.datepicker.year');
      return this.year + yearTranslation;
    }
  }
};
</script>

<style></style>
